<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="__STATIC__/index/css/style.css" />
	<link rel="stylesheet" type="text/css" href="__STATIC__/index/css/swiper.min.css" />
	<script type="text/javascript" src="__STATIC__/index/js/rem.js"></script>
	<title>商品详情</title>
</head>
<body>
   <div class="glasses_detail geryBg">  

   	<div class="banner">
   	 	<!--商品轮播-->
   	    <div class="swiper-container" id="swiper">
   	 		<div class="swiper-wrapper">
				{foreach $goods.goods_image as $v}
   	 			<div class="swiper-slide">
   	 				<img class="auto-img" src="{$v}" />
   	 			</div>
   	 			{/foreach}
   	 		</div>
   	 		<div class="swiper-pagination"></div>
   	 	</div> 
   	 	<!--商品价格-->
   	 	<div class="goods_price whiteBg">
   	 		<div class="clear">
   	 			<div class="fl">
   	 				<p class="goods_name smoth">{$goods.goods_title}</p>
   	 				<p class="goods_des normall-text">{$goods.goods_desc}</p>
   	 			</div>
   	 			<div class="fr share-box">
   	 				<i class="icon-share"></i>
   	 				<span class="text-center normall-text share block">分享</span>
   	 			</div>
   	 		</div>
   	 		<div class="price">
   	 			<span class="brown">￥{$goods.price_one}</span>
   	 			<s>￥{$goods.price_two}</s>
   	 		</div>
   	 	</div>   	 	
   	 </div>
   	 <!--选择商品规格-->
 	<!--<div class="goods_size clear whiteBg" onclick="showTips('.goods_specification')">-->
 		<!--<p class="fl smoth super-text">规格数量选择</p>-->
 		<!--<i class="fr in-lineblock"></i>-->
 	 <!--</div>-->
 	 <!--商品评论-->
 	<!--商品评论-->
 	<div class="goods_commend geryBg">
 	 	<!--评论分类-->
 	 	<div class="commend_classify whiteBg">
 	 		<ul class="clear super-text smoth">
 	 			<li class="on" id="quanbu"></li>
 	 			<li id="hao"></li>
 	 			<li id="zhong"></li>
 	 			<li id="cha"></li>
 	 		</ul>
 	 	</div>
 	 	<!--评论-->
		<div id="comment" style="min-height: 9rem"></div>
 	 	<!--评论 end-->
 	 </div>
    <!--底部tab-->
    <div class="goods_tab clear">
     	<!--首页购物车-->
     	<ul class="tab_icon clear-flow fl">
     		<a href="/index/entry/index"><li>
     			<i class="home"></i>
     			<p class="normall-text">首页</p>
     		</li>
        </a>       
     		<a href="/index/cart/index"><li>
     			<i class="cart"></i>
     			<p class="normall-text">购物车</p>
     			<!--选择商品购物车数量-->
     			<i class="cart_num text-hidden {if $cartnum!=0}block{/if}">{$cartnum}</i>
     		</li>
        </a>
     	</ul>
     	<!--按钮-->
        <div class="fr btn">
        	<button class="white text-center super-text" onclick="showTips('.goods_specification')">加入购物车</button>
        	<button class="white text-center super-text buy_now" onclick="showTips('.goods_specification')" data-type="buy_now">立即购买</button>
        </div>
     </div>
    <!--商品详情-->
    <div class="goods_detail block">
		{$goods.goods_content|raw}
    </div>
   </div>
   <!--选择规格弹窗-->
   <div class="goods_specification">
   	  <div class="specification whiteBg">
   	  	<div class="property clear">
   	  		<!--商品图片-->
   	  		<div class="goods_img fl">
   	  			<img class="auto-img" id="goods_logo" src="{$goods.goods_logo}" />
   	  		</div>
            <!--商品单价-->
            <div class="property_price fr bold">
            	<p class="brown" id="price_one">￥{$goods.price_one}</p>
            	<p class="smoth super-text" id="rest">请选择属性规格</p>
            </div>
   	  	</div>
   	  	<img class="close" src="__STATIC__/index/img/icon-close.png" onclick="hiddenTips('.goods_specification')" />
   	  	<!--颜色分类-->
   	  	<div class="color_classify">
			{foreach $goods.attr as $k=>$a}
   	  		<p class="smoth super-text bold">{if $k=='default'}{else}{$k}{/if}</p>
   	  		<!--选择颜色分类-->
   	  		<ul class="color_list clear">
				{foreach $a as $v}
   	  			<li data-value="{$k}:{$v}">{if $v=='default'}默认{else}{$v}{/if}</li>
   	  			{/foreach}
   	  		</ul>
			{/foreach}
   	  	</div>
   	  	<!--商品数量-->
   	  	<div class="goods_num clear">
   	  		<p class="fl smoth super-text bold">购买数量</p>
   	  		<div class="fr num">
   	  			<span class="b">-</span>
   	  			<input type="number" name="" value="1" />
   	  			<span class="b">+</span>
   	  		</div>
   	  	</div>
   	  	<!--确定按钮-->
   	  	<div class="goods_btn">
   	  		<button>确定</button>
   	  	</div>
   	  </div>
   </div>
   <!--滚动出现的选项卡-->
   <div class="goods_nav">
   	 <i class="arrow"></i>
   	 <!--切换选项-->
   	 <ul class="nav_list clear">
   	 	<li class="on">商品详情</li>
   	 	<li>全部评论</li>
   	 </ul>
   </div>
<script type="text/javascript" src="__STATIC__/index/js/swiper.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/layer/layer.js"></script>
<script type="text/javascript">
	window.onload = function(){
		var swiper = new Swiper('#swiper',{
			autoplay:true,
			loop:true,
			pagination:{
	            el:'.swiper-pagination',
	            type:'bullets',
	            clickable:true
          }
		})
	}

	//弹出层禁止手指滑动
	$('.goods_specification').on('touchmove',function(e){
		 e.preventDefault()
	})

	//点击增加或减少按钮
	$('.b').on('click',function(){
		if ($(this)[0].innerText == '-') {
			if ($('.num').children('input').val() > 1) {
				var val = $('.num').children('input').val();
				val -= 1;
				$('.num').children('input').val(val);
			}else{
				layer.msg('数量不能再少了',{time:1000})
			}
		}else if ($(this)[0].innerText == '+') {
		    if($('.num').children('input').val() < rest){
                var val = $('.num').children('input').val();
                val ++;
                $('.num').children('input').val(val);
			}else {
                layer.msg('数量不能再多了',{time:1000})
			}

		}
	})
	//判断input框输入的值是否是数字
	$('.num input').on('keyup',function(){
		if (!/^[0-9]+.?[0-9]*$/.test($(this).val())) {
             $(this).val(1)
		}else if($(this).val() < 1){
			$(this).val(1)
		}else if($(this).val() == ''){
			$(this).val(1)
		}
	})
	//显示弹窗函数
	function showTips(classname){
		return $(classname).show();
	}
	//隐藏弹窗函数
	function hiddenTips(classname){
		return $(classname).hide();
	}
	//点击立即购买
	var index;
	$('.buy_now').on('click',function(){
       index = $(this).attr('data-type')
	});

	//滚动出现选项卡
	//获取高度
	var height = (Number($('.banner')[0].scrollHeight))
	$(window).scroll(function(){
	   if ($(window).scrollTop() > height) {
          $('.goods_nav').addClass('block')
       }else{
         $('.goods_nav').removeClass('block')
       }
	});
	//点击返回按钮
	$('.goods_nav .arrow').on('click',function(){
		window.location.href = 'javascript:history.back()'
	});

    //切换显示商品详情或评论 ---评论开始
    $('.goods_nav li').on('click',function(){
        $(this).addClass('on').siblings().removeClass('on');
        if ($(this)[0].innerText == '商品详情') {
            $('.goods_detail').addClass('block')
            $('.goods_commend').removeClass('block')
        }else if ($(this)[0].innerText == '全部评论') {
            $('.goods_detail').removeClass('block')
            $('.goods_commend').addClass('block')
			//请求评论数
			getnum();
            if($('#comment').html()==''){
                getcomment('quanbu','1');
            }
        }
    })

	function getnum() {
        $.ajax({
            url:"comment_num_ajax",
            type:"post",
            data:{id:'{$goods.id}'},
            success:function (res) {
                if(res.code=='ok'){
                    $('#quanbu').text(res.quanbu);
                    $('#hao').text(res.hao);
                    $('#zhong').text(res.zhong);
                    $('#cha').text(res.cha);
                }
            }
        })
    }

    var page = 1;
    //选择评论分类
    $('.glasses_detail .goods_commend .commend_classify ul li').on('click',function(){
        $(this).addClass('on').siblings().removeClass('on');
        var type = $(this).attr('id');
        $('#comment').html('');
        page = 1;
        getcomment(type,'1');
    })

	//滚动加载评论
	$(window).scroll(function () {
		var scrollTop = $(this).scrollTop();
		var scrollHeight = $(document).height();
		var windowHeight = $(this).height();
		var gocheng =parseInt(scrollTop)+parseInt(windowHeight);
		if($('.goods_commend').hasClass('block')){
			if ( gocheng==scrollHeight ) {
				page++;
				console.log(page);
				var type = $('.commend_classify ul li[class="on"]').attr('id');
				getcomment(type,page);
			}
		}
	})

	//ajax请求评论
	function getcomment(type,page) {
		$.ajax({
			url:"comment_ajax",
			type:"post",
			data:{id:'{$goods.id}',type:type,page:page},
			success:function (res) {
				if(res.code=='ok'){
                    $('#comment').append(res.str);
				}
            }
		})
    }
	// ---评论结束

    //商品规格 选择规格
    $('.goods_specification .specification .color_classify .color_list li').on('click',function(){
        $(this).addClass('on').siblings().removeClass('on');
		getattr();
    });

	var id;
	var rest;
	function getattr() {
        var str='';
        $('.color_list li[class="on"]').each(function(){
            if (str==''){
                str+=$(this).data('value');
			}else {
                str+=','+$(this).data('value');
			}
		});

        if(str!=''){
            $.ajax({
				url:"attr_ajax",
				type:'post',
				data:{goods_spec:str,mg_id:"{$goods.id}"},
				success:function (res) {
					if(res.code=='ok'){
					    id=res.spec.id;
                        rest = res.spec.stock-res.spec.sale;
					    $('#goods_logo').attr('src',res.spec.goods_spec_img);
					    $('#price_one').text('￥'+res.spec.price_one);
					    $('#rest').text('库存：'+rest);

					    if(rest==0){
                            $('.goods_btn button').text('已售罄');
                            $('.goods_btn button').attr('disabled',true);
						}else {
                            $('.goods_btn button').text('确定');
                            $('.goods_btn button').attr('disabled',false);
						}
					}
                }
			})
		}
    }

    //点击确定规格
    $('.goods_btn button').on('click',function(){
        if (id==''||id==undefined){
            layer.msg('请选择规格',{time:1000});
        }else {
            //立即购买
            if (index == 'buy_now') {
                window.location.href = '/index/cart/confNow?id='+id+'&num='+$('.num input').val();
            }else{
                //加入购物车
				$.ajax({
					url:"addCart",
					type:"post",
					data:{id:id,num:$('.num input').val(),mg_id:'{$goods.id}'},
					success:function (res) {
                        layer.msg(res.msg,{time:1000});
						if(res.code=='in'){
                            var num = $('.cart_num').text();
                            $('.cart_num').text(parseInt(num)+1);
                            $('.cart_num').addClass('block');
                            hiddenTips('.goods_specification');
						}else if(res.code=='no') {
                            hiddenTips('.goods_specification');
						}
                    }
				})
            }
        }

    })

</script>
</body>
</html>